/**
 * @date: 2024-08-27 23:42:32
 * @description: 获取react 实例
 * useEffect: react一个钩子函数(生命周期)在函数组件中执行副作用操作。副作用是指那些不属于组件渲染逻辑的操作，比如数据获取、订阅或手动更改 DOM。,
 * useState: 允许你在组件内部声明一个可变的变量（称为“状态”），并且随着组件的渲染，这个状态可以更新
 * @modifyContent:
 * @author: Forever丿顾北
**/
import React from "react";
import { Table, Space, Button, Empty, Popconfirm, message } from "antd";
import { DeleteOutlined, EditOutlined } from '@ant-design/icons';
// 创建组件,使用hooks
const IndexTable =  ({ dataSource, onEditClick, onDeleteClick }) => {
  const customLocale = {
    emptyText: (
      <Empty description="暂无数据~"/>
    ),
  };
  /**
   * @date: 2024-10-08 17:03:47
   * @description: 表格序号
   * @modifyContent:
   * @author: Forever丿顾北
  **/
  const renderWithIndex = (text, record, index) => {
    return <span>{index + 1}</span>;
  };
  /**
   * @date: 2024-08-27 23:58:37
   * @description: 表格配置
   * @modifyContent:
   * @author: Forever丿顾北
  **/
  const columns = [
    {
      title: '#',
      align: 'center',
      dataIndex: 'index',
      width: 60,
      key: 'index',
      render: renderWithIndex,
    },
    {
      title: '姓名',
      align: 'center',
      dataIndex: 'name',
      width: 200,
      key: 'name',
    },
    {
      title: '年龄',
      align: 'center',
      dataIndex: 'age',
      width: 50,
      key: 'age',
    },
    {
      title: '性别',
      align: 'center',
      dataIndex: 'gender',
      width: 50,
      key: 'gender',
      render: (text, record, index) => (
        <div>
          {text === 1 ? '男' : text === 0 ? '女' : '暂无数据'}
        </div>
      )
    },
    {
      title: '出生日期',
      align: 'center',
      width: 150,
      dataIndex: 'birthDate',
      key: 'birthDate',
    },
    {
      title: '住址',
      align: 'center',
      dataIndex: 'address',
      key: 'address',
    },
    {
      title: '操作',
      align: 'center',
      key: 'action',
      width: 200,
      render: (text, record, index) => (
        <Space size="middle">
          <Button type="primary" size="small" iconPosition="end" icon={<EditOutlined /> } onClick={()=>EditData(text, record, index)}>编辑</Button>
          <Popconfirm
            title="提示"
            description="此操作将删除该数据, 确定删除？"
            onConfirm={()=>DeleteData(text, record, index)}
            onCancel={()=>onCancel()}
            okText="确定"
            cancelText="取消"
          >
            <Button type="primary" danger size="small" iconPosition="end" icon={<DeleteOutlined />}>删除</Button>
          </Popconfirm>
        </Space>
      ),
    },
  ];
  /**
   * @date: 2024-09-10 16:33:56
   * @description: 编辑数据
   * @modifyContent:
   * @author: Forever丿顾北
  **/
  const EditData = (row, record, index)=> {
    // 执行按钮点击后的逻辑
    onEditClick(row)
  }

  /**
   * @date: 2024-09-10 16:39:42
   * @description: 删除数据
   * @modifyContent:
   * @author: Forever丿顾北
  **/
  const DeleteData = (row, record, index)=> {
    // 执行按钮点击后的逻辑
    onDeleteClick(row)
  }
  /**
   * @date: 2024-09-10 16:53:09
   * @description: 气泡弹窗取消
   * @modifyContent:
   * @author: Forever丿顾北
  **/
  const onCancel = () => {
    message.error('已取消操作！')
  };
  return (
    <div id="IndexTable">
      <Table
        rowKey={'id'}
        bordered
        dataSource={dataSource}
        columns={columns} 
        pagination={false}
        size={'middle'}
        locale={customLocale}
        scroll={{ y: '68vh' }}
      />
    </div>
  );
}

export default IndexTable;